<!DOCTYPE html>
<html lang="zh-cn" ng-app="bookstoreApp">
<head>
	<title>bookstore</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.css">
	<style>
		a,a:hover{text-decoration:none;}
	</style>
</head>

<body class="container" ng-controller="bookListController">
	<header class="page-header">
		<h1><small>{{"Hi" + " " + "BookStore"}}</small></h1>
	</header>

	<!-- bookList  bookDetail -->
	<div ng-view></div>
	
</body>

<script src="http://cdn.bootcss.com/angular.js/1.5.0/angular.js"></script>
<script src="http://cdn.bootcss.com/angular.js/1.5.0/angular-route.js"></script>
<script src="http://cdn.bootcss.com/angular.js/1.5.0/angular-resource.js"></script>
<script src="http://cdn.bootcss.com/angular.js/1.5.0/angular-animate.js"></script>

<script type="text/javascript">

	var bookstoreApp = angular.module("bookstoreApp",["ngRoute"]);

	/*检查状态 过滤器*/
	bookstoreApp
		.filter("checkStatusFilter",function(){
			return function(status){
				return status==true?"正常出售":"暂无库存";
			};
		})
		.filter("getStatusLabelFilter",function(){
			return function(status){
				return status==true?"label-success":"label-danger";
			};
		});

	/*配置路由*/
	bookstoreApp.config(function($routeProvider){
		$routeProvider
			.when("/",{
				templateUrl : "bookList-http.html",
				controller : "bookListController"
			})
			.when("/:id",{
				templateUrl : "bookDetail.html",
				controller : "bookDetailController"
			})
			.otherwise({
				redirectTo:"/"
			});
	});

	/*获取所有的book [通过 ng-http 请求]*/
	bookstoreApp.controller("bookListController",function($scope,$http){
		$http.get("db/books.json").success(function(resp){
			$scope.books = resp.data;
		});

		$scope.orderByProp = "title";
	});

	/*获取书的详细信息 [通过 ng-http 请求]*/
	bookstoreApp.controller("bookDetailController",function($scope,$http,$routeParams){
		/*$scope.id = $routeParams.id;*/
		$http.get("db/"+$routeParams.id+".json").success(function(resp){
			$scope.book = resp;
			$scope.cover = $routeParams.id;
		});

		/*相关图书 点击事件*/
		$scope.setCover = function(id){
			$scope.cover = id;
		}

	});

</script>

</html>